const path = require("path")
const { smart } = require("webpack-merge")
const { srcPath, distPath } = require("./paths")
const webpackCommonConf = require("./webpack.common.js")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")

module.exports = smart(webpackCommonConf, {
  // mode: "production" 看上去就一行代码，实际上webpack背后会做很多事情
  // 如：mode: "production" 打包后的代码是压缩好的。
  mode: "production",  // 指定生产模式打包
  output: {
    // [contentHash:8] 避免走缓存
    filename: 'bundle.[contentHash:8].js', // 打包后的文件叫bundle.js
    path: distPath, // 打包后的文件放在哪里
  },
  module: {
    rules: [
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: {
          loader: "url-loader",
          options: {
            // 如果图片小于10kb，打包成字符串（base64）
            // 否则，效果和file-loader是一样的
            limit: 10 * 1024,
            // 如果打包出来的是一张图片，放在什么地方
            outputPath: '/imgs/'
          }
        }
      },
    ]
  },
  plugins: [
    new CleanWebpackPlugin(), // 打包之前，清空上一次残留
  ]
})

